<template>
  <div class="tipsContainer">
    <Button @click="modalVisible = true"> 显示模态框 </Button>
    <Modal
      title="模态框title"
      :visible="modalVisible"
      @modal-on-cancel="modalVisible = false"
    >
      这是一个模态框
    </Modal>

    <Button @click="textActive = true"> 点击我实现动画 </Button>
    <h1 :class="{aniText_shake:textActive}">动画文字</h1>

    <Button @click="flipinIn = true">animate.css的方式实现</Button>
    <h1 class="animate__animated" :class="{animate__bounce:flipinIn}">通过animate.css的方式实现</h1>

    <Button @click="createMessage('也是了','success',2000)"> message提示框 </Button>

    <Button @click="fightImg"> 斗图 </Button>
  </div>
</template>

<script lang="ts">
import { getFightImgList1 } from "@/api/index"
import { defineComponent, ref } from "vue";
import createMessage from "@/components/createMessage"
export default defineComponent({
  name: "tips",
  setup() {
    const modalVisible = ref(false);
    const textActive = ref(false)
    const flipinIn = ref(false)
    const fightImg =()=> {
       getFightImgList1({
        msg:'美女'
      }).then()
    }
    return {
      modalVisible,
      textActive,
      flipinIn,
      createMessage,
      fightImg
    };
  },
});
</script>

<style lang="scss">
.tipsContainer {
  padding: 20px;
  min-width: 800px;
  .aniText_shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
}
</style>